<template>
  <button @click="show = !show">点击切换（v-if）</button>
  <!-- 🔔transition 注意点：只能包一个标签或者一个组件 -->
  <transition name="fade">
    <div v-if="show" class="box">盒子</div>
  </transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const show = ref(false)
    return { show }
  }
}
</script>

<style lang="less" scoped>
.fade-leave-from {
    opacity: 1
}
.fade-leave-active {
    transition: all 3s;
}
.fade-leave-to {
    opacity: 0
}
.box{
    width: 100px;
    height: 100px;
    background-color: palegoldenrod;
}
</style>
